<script setup>
  import {ref, reactive, defineEmits, defineProps, watch} from "vue";
  import {ElMessage} from "element-plus";
  import {existKnowledgeBase, addKnowledgeBase, getKnowledgeBase, updateKnowledgeBase} from "@/api/knowledgebase";

  const addKnowledgeDom = ref()

  const formData = ref({
    name: ""
  })

  const props = defineProps({
    modelValue: {
      type: Boolean,
      required: true
    },
    id: {
      type: String
    }
  })
  const dialogVisible = ref(false)

  watch(props, (newValue, oldValue) => {
    dialogVisible.value = newValue.modelValue
    if(newValue.id) {
      getKnowledgeBase(newValue.id).then(res => {
        formData.value = {
          id: res.data.id,
          name: res.data.name,
          description: res.data.description
        }
      })
    } else {
      if (newValue.modelValue) {
        formData.value = {
          name: "",
          description: ""
        }
      }
    }
  });


  const emits = defineEmits(['update:modelValue', "success"])

  const handleClose = (done) => {
    done()
  }

  const close = () => {
    emits("update:modelValue", false)
    emits("success")
  }

  const validName = (rule, value, callback) => {
    const reg = /^[a-zA-Z0-9_-]+$/

    if (value == '') {
      callback(new Error("请输入知识库"))
    }
    else if (!reg.test(value)) {
      callback(new Error("输入的符合规范的知识库名称"))
    } else {
      let data = {
        name: value
      }
      if(props.id) {
        data.id = props.id
      }
      existKnowledgeBase(data).then(res => {
        if(res.data == true) {
          callback(new Error("此知识库已经存在，请重新输入"))
        } else {
          callback();
        }
      })
    }

  }


  const rules = {
    name: [{required: true, message: '请输入知识库名称', trigger: 'blur'}, {validator: validName, trigger: 'blur'}],
    description: [{required: true, message: '请输入知识库描述', trigger: 'blur'}]
  }

  const onSubmit = () => {
    // 开始校验
    addKnowledgeDom.value.validate(valid => {
      if (valid) {
        if (formData.value.id) {
          updateKnowledgeBase(formData.value).then(res => {
            ElMessage.success("修改成功")
            close()
          })
        } else {
          addKnowledgeBase(formData.value).then(res => {
            ElMessage.success("添加成功")
            close()
          })
        }
      }
    })
  }

</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      title="新建知识库"
      width="500"
      :before-close="handleClose">
    <el-form ref="addKnowledgeDom" :model="formData" :rules="rules" label-width="80px">
      <el-form-item label="名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="formData.description" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="onSubmit">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>